<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <header>
        <div class="head-nav container">
            <div class="big-nav">
                <a href="#">网易云音乐</a>
            </div>
            <ul>
                <li class="active">
                    <a href="#">发现音乐</a>
                </li>
                <li>
                    <a href="#">我的音乐</a>
                </li>
                <li>
                    <a href="#">朋友</a>
                </li>
                <li>
                    <a href="#">商城</a>
                </li>
                <li>
                    <a href="#">音乐人</a>
                </li>
                <li>
                    <a href="#">下载客户端</a>
                </li>
            </ul>
            <div>
                <input id="search" type="text" placeholder="音乐/视频/电台/用户">
            </div>
        </div>
    </header>
    <div class="small-nav">
        <ul class="container">
            <li class="on">
                <a href="#">推荐</a>
            </li>
            <li>
                <a href="#">排行榜</a>
            </li>
            <li>
                <a href="#">歌单</a>
            </li>
            <li>
                <a href="#">主播电台</a>
            </li>
            <li>
                <a href="#">歌手</a>
            </li>
            <li>
                <a href="#">新歌上架</a>
            </li>
        </ul>
    </div>

    <!-- 轮播 -->
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active img-bg">
                <div class="container">
                    <img src="./images/1.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
            <div class="carousel-item img-bg">
                <div class="container">
                    <img src="./images/2.jpg" class="d-block w-100" alt="...">
                </div>

            </div>
            <div class="carousel-item img-bg">
                <div class="container">
                    <img src="./images/3.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <div class="songs container">
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>

    <script src="./js/jquery.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>